<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击事件</title>
		<!-- 通过CDN的方式安装VUE -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			*{
				/* 外边距 */
				margin: 0;
				/* 内边距 */
				padding: 0;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
			.on-scroll{
				width: 100px;
				height: 500px;
				/* 文本居中 */
				text-align: center;
				/*y轴 超出部分 显示滚动条 */
				overflow-y: auto;
				/* 去除ul的黑点 */
				list-style: none;
			}
			.on-scroll > li{
				width: 100px;
				height: 100px;
				/* 行高  行高和高一致代表内容居中*/
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 点击事件第一种 -->
			<button v-on:click="msg()" type="button">你点我试试</button>
			<br>
			<!-- 简单版 -->
			<button @click="msg()" type="button">你点我试试2</button>
			<br>
			<!-- 点击方法时携带参数 -->
			<button @click="del(1001001,$event)" type="button">删除当前行</button>
			<br>
			<!-- 阻止默认事件 -->
			<a @click.prevent="msg()" href="https://www.baidu.com">点我3</a>
			<br>
			<!-- 只执行一次 -->
			<button @click.once="pay" type="button">秒杀活动</button>
			<br>
			<br>
			<br>
			<!-- 阻止事件冒泡 只执行自己，不支付父标签的事件-->
			<div @click="msg" class="box2">
				<button @click.stop="pay" type="button">秒杀活动</button>
			</div>
			<!-- 滚动事件 -->
			<ul class="on-scroll" @scroll="ulWhell">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
			
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				//作用域
				el:'#box',
				//方法的存放位置
				methods:{
					//滚动事件
					ulWhell(){
						console.log("我正在滚动");
					},
					msg(){
						alert("试试就试试")
					},
					del(id,event){
						alert("删除id为："+id+"的数据");
						//获取当前点击按钮系统或浏览器的参数
						console.log(event);
					},
					pay(){
						alert("正在支付")
					}
				}
			})

		</script>
	</body>
</html>
